<template>
	<view>
		<!-- 优惠券弹出层 -->
		<u-popup :show="show" @close="close" mode="center">
			<view class="mainpadding">
				<image class="tupian" src="../static/image/system/vs.png" mode=""></image>
				<view class="flexcenter margin_top" @click="close">
					<u-icon name="close-circle-fill" color="#fff" size="28"></u-icon>
				</view>
			</view>
		</u-popup>
		<view class="">
			<view class="uni-margin-wrap">
				<swiper class="swiper" @change="changetab">
					<swiper-item>
						<view class="swiper-item uni-bg-red dingwei">
							<view class="">
								视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-green">
							<view class="">
								视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>视频<br>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y="true" style="height: 100vh;">
							<view class="swiper-item uni-bg-blue" style="padding-bottom: 180rpx;">
								<!-- 头部内容 -->
								<u-sticky bgColor="#fff">
									<view class="dingbu mainpadding2">
										<view class="" :style="{paddingTop:menutop+'rpx'}">
											<view class="flexbetween margin_top">
												<view class="flexleft ssousuobox" @click="jumper('/pages_homepage/sousuo')">
													<view class="margin_right2">
														<u-icon name="search" color="#999999" size="28"></u-icon>
													</view>
													<input type="text" placeholder="输入商品搜索" :disabled="true">
												</view>
												<view class="dingwei" @click="jumper('/pages_homepage/gouwuche')">
													<u-icon name="shopping-cart-fill" color="#333333" size="28"></u-icon>
													<view class="shulbtn">5</view>
												</view>
											</view>
										</view>
									</view>
								</u-sticky>
								<u-swiper :list="list1" height="150px"></u-swiper>
								<view class="mainpadding">
									<!-- 分类 -->
									<view class="flexleft flex_wrap ffffff radius mainpadding2">
										<view class="ershi flexcenter margin_top" v-for="item in 10" @click="tzfl">
											<view class="">
												<view class="icon">
													<image src="../static/image/system/vs.png" mode=""></image>
												</view>
												<view class="ershil xiaohei textcenter margin_top1">果树鲜花</view>
											</view>
										</view>
									</view>
									<!-- 商品列表 -->
									<view class="flexbetween flex_wrap">
										<view class="shpbox margin_top" v-for="item in 4" @click="tzspxq">
											<image class="sptup" src="../static/image/system/sc.png" mode=""></image>
											<view class="" style="padding: 24rpx; background-color: #fff;">
												<view class="xiankuan ershiba">巴旦木奶枣夹心奶枣杏仁125g独立包装网</view>
												<view class="flexleft margin_top1">
													<view class="strongtext xiaohong margin_right1">￥9.99</view>
													<view class="smalltext xiaohui ">已售1.2万件</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
						
					</swiper-item>
				</swiper>
			</view>
		</view>
		<tabbardi :current="0"></tabbardi>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menutop: 0,
				show: true,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: false,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
		},
		methods: {
			// 跳转商品详情
			tzspxq(){
				uni.navigateTo({
					url:'/pages_homepage/shangpxq'
				})
			},
			// 跳转分类商品列表
			tzfl(){
				uni.navigateTo({
					url:'/pages_homepage/fenlei'
				})
			},
			changetab(e){
				this.current = e.detail.current
				console.log(e,"当前下表");
			},
			jumper(url) {
				uni.navigateTo({
					url: url
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			close() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 商品列表
	.sptup {
		width: 100%;
		height: 331rpx;
		border-radius: 24rpx 24rpx 0 0;
	}

	.shpbox {
		width: 48%;
		border-radius: 24rpx;
	}

	//结束
	.swiper {
		min-height: calc(100vh - 140rpx);
		background-color: #F7FBFE;
	}

	.icon {
		margin: auto;
		width: 96rpx;
		border-radius: 50%;
		height: 96rpx;

		image {
			margin: auto;
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.shulbtn {
		opacity: .9;
		position: absolute;
		top: -10rpx;
		background-color: #fff;
		right: -10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		width: 40rpx;
		height: 38rpx;
		font-size: 22rpx;
		border: 1rpx solid #CFCFCF;
	}

	.dingbu {
		background-size: 100% 100%;
		width: 100%;
		background-image: url('../static/image/system/sc.png');
		box-sizing: border-box;
	}

	.tupian {
		width: 550rpx;
		height: 565rpx;
	}

	/deep/.u-popup__content {
		background-color: rgba(0, 0, 0, .01) !important;
	}
</style>